<template>
  <div>
    <div class="search-common">
      <el-row class=" pt10">
        <el-button type="primary" size="mini" @click="trumpetDialog=true">发布小喇叭</el-button>
      </el-row>
      <el-row class="mt10 pt10">
        <el-form :inline="true" :model="noticeForm" size="mini" class="demo-form-inline">
          <el-form-item label="发布范围">
            <el-select v-model="noticeForm.noticeArea" placeholder="发布范围">
              <el-option label="不限" value=""></el-option>
              <el-option label="仅讲师" value="1"></el-option>
              <el-option label="全体" value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="经纪商">
            <el-select v-model="noticeForm.noticeAngent" placeholder="经纪商">
              <el-option label="全部" value=""></el-option>
              <el-option label="所有" value="0"></el-option>
              <el-option v-for="item of getAngents" :key="item.key" :label="item.name" :value="item.key"></el-option>
              <el-option label="无绑定用户" value="-1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="发布时间">
            <el-date-picker v-model="noticeForm.noticeDate" type="daterange" range-separator="至" value-format="yyyy-MM-dd" start-placeholder="开始日期" :picker-options="pickerOptions" end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
            <el-button type="default" @click="onReset">重置</el-button>
          </el-form-item>
        </el-form>
      </el-row>
    </div>
    <div class="pl20 pr20 mt10" style="background:#fff" v-loading="loading">
      <br/>
      <el-table :data="tableData" border size="mini" style="width: 100%" v-loading="loading">

        <el-table-column label="序号">
          <template slot-scope="scope">
            {{scope.$index+1}}
          </template>
        </el-table-column>

        <el-table-column prop="scope" width="" label="发布范围">
          <template slot-scope="scope">
            {{scope.row.scope=='0'?'全体':(scope.row.scope=='1'?'讲师':'其他')}}
          </template>
        </el-table-column>

        <el-table-column label="经纪商">
          <template slot-scope="scope">
            {{scope.row.agent_num | filterAgent}}
          </template>
        </el-table-column>
        <el-table-column prop="content" label="内容">
        </el-table-column>
        <el-table-column prop="play_count" label="循环次数">
        </el-table-column>

        <el-table-column prop="oporater" label="发布人">
        </el-table-column>

        <el-table-column prop="create_time" label="发布时间">
        </el-table-column>
        <!-- <el-table-column prop="address" label="操作" style="width:10%;">
          <template slot-scope="scope">
              <el-button  type="text" size="small" @click="$router.push({name:'menu_notice_add',query:{id:scope.row.id}})">编辑</el-button>
            <el-button  type="text" size="small" @click="opeationNotice(scope.row)">
             
           {{(scope.row.status=='0'?'发布':scope.row.status=='1'?'停用':scope.row.status=='2'?'启用':'其他')}}
            </el-button>
          </template>
        </el-table-column> -->
      </el-table>

      <page-pagination v-on:pageFun="pageFunNumber" :page="page" :pageSize="pageSize" :total="total">
      </page-pagination>

    </div>
    <common-dialog title="发布小喇叭" :base-dialog="trumpetDialog">
      <div slot="body">
        <el-form :model="trumpet_dialog" :rules="rules" ref="trumpet_dialog" size="mini" label-width="80px" slot="body">
          <el-form-item label="范围" prop="trumpet_scope">
            <el-radio-group v-model="trumpet_dialog.trumpet_scope">
              <el-radio :label="0">全体</el-radio>
              <el-radio :label="1">仅讲师</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="经纪商" prop="trumpet_agent">
            <el-select v-model="trumpet_dialog.trumpet_agent" placeholder="经纪商">
              <el-option label="所有" value=""></el-option>
              <el-option v-for="item of getAngents" :key="item.key" :label="item.name" :value="item.key"></el-option>
              <el-option label="无绑定用户" value="-1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="播放次数" prop="trumpet_count">
            <el-radio-group v-model="trumpet_dialog.trumpet_count">
              <el-radio :label="1">1次</el-radio>
              <el-radio :label="2">2次</el-radio>
              <el-radio :label="3">3次</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="内容" prop="trumpet_content">
            <el-input v-model="trumpet_dialog.trumpet_content" :maxlength="30" placeholder="请输入内容" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="链接URL" prop="trumpet_url">
            <el-input type="text" v-model="trumpet_dialog.trumpet_url" placeholder="请输入链接地址" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="" style="width:400px;">
            <el-button type="primary" @click="addTrumpet('trumpet_dialog')">确定</el-button>
            <el-button type="primary" @click="cancelDialog('trumpet_dialog')">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </common-dialog>
  </div>

</template>

<style scoped>
.el-table__body {
  /* width: 99%!important; */
  table-layout: inherit !important;
}
</style>


<script>
import pagePagination from "@/components/Common/pagePagination";
import commonDialog from "@/components/Common/CommonDialog";
import server from "@/service/index_c";
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      loading: false,
      trumpetDialog: false,
      page: 0,
      pageSize: 15,
      total: 0,
      tableData: [],
      trumpet_dialog: {
        trumpet_scope: 0,
        trumpet_agent: "",
        trumpet_count: 1,
        trumpet_content: "",
        trumpet_url: ""
      },
      noticeForm: {
        noticeState: "",
        noticeArea: "",
        noticeAngent: "",
        noticeDate: ""
      },
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        }
      },
      rules: {
        trumpet_content: [
          { required: true, message: "请输入内容", trigger: "blur" }
        ],
        // trumpet_url: [
        //   { required: true, message: "请输入链接地址", trigger: "blur" }
        // ]
      }
    };
  },
  created() {
    this.$store.dispatch("setAllAngentLists");
  },
  mounted() {
    this.queryHaiheiNoticeListItem();

  },
  computed: {
    ...mapGetters({
      getAngents: "getAllAngentLists"
    })
  },

  methods: {
    async queryHaiheiNoticeListItem(page = 1) {
      this.loading = true;
      let params = {
        page: page,
        pageSize: this.pageSize,
        status: this.noticeForm.noticeState,
        scope: this.noticeForm.noticeArea,
        agent_num: this.noticeForm.noticeAngent,
        push_time_begin: this.noticeForm.noticeDate ? this.noticeForm.noticeDate[0] : '',
        push_time_end: this.noticeForm.noticeDate ? this.noticeForm.noticeDate[1] : ''
      };
      let resultData = await server.haibeiGetSystemLabaByPageItem(params);
      if (resultData.success) {
        this.loading = false;
        this.tableData = resultData.result.pageList;
        this.page = resultData.result.page;
        this.total = resultData.result.nums;
      } else {
        this.$message({
          type: "error",
          message: resultData.msg
        });
      }
    },
    //操作公告
    async opeationNotice(row) { },
    async addTrumpet(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.submitData(formName);
        }
      });
    },
    async submitData(formName) {
      let params = {
        scope: this.trumpet_dialog.trumpet_scope,
        agent_num: this.trumpet_dialog.trumpet_agent,
        content: this.trumpet_dialog.trumpet_content,
        play_count: this.trumpet_dialog.trumpet_count,
        url: this.trumpet_dialog.trumpet_url
      };
      console.table(params)
      let resultData = await server.haibeiAddTurmpetItem(params);
      if (resultData.success) {
        this.$refs[formName].resetFields();
        this.queryHaiheiNoticeListItem();
        this.trumpetDialog = false;
        this.$message({
          type: "success",
          message: '发布成功'
        });
      } else {
        this.$message({
          type: "error",
          message: resultData.msg
        });
      }
    },
    //查询
    onSubmit() {
      this.queryHaiheiNoticeListItem();
    },
    // 重置
    onReset() {
      this.noticeForm = {
        noticeState: "",
        noticeArea: "",
        noticeAngent: "",
        noticeDate: ""
      };
      this.queryHaiheiNoticeListItem();
    },
    cancelDialog(formName) {
      this.$refs[formName].resetFields();
      this.trumpetDialog = false;
    },
    //分页
    pageFunNumber(page) {
      this.queryHaiheiNoticeListItem(page);
    }
  },
  components: {
    commonDialog,
    pagePagination
  }
};
</script>
